I found this script for cascading menus, however, I cannot reach the
author to solve the bug I am having when I add a second menu to it.
My problem is this:
If I click on the first link, the menu displays well. If I then click
on the second link, the first menu from the first link still displays.
How do I get make the first menu disappear when I click on the second
and vice versa? Please help...thanks.
Code is as follows:
/************************************************** ****
* HMenu.js - v. 1.05 000710 *
* Cascading menu creation system *
* by Aaron Prenot *
* Copyright (c) 2000 Aaron Prenot *
* http://www.redrival.com/aprenot *
* *
* Published and Documented at *
* o www.redrival.com/aprenot *
* o www.webdevelopersjournal.com *
* *
* You may use this code on a public web site only *
* if this entire copyright notice appears *
* unchanged. We would also appreciate you *
* creating a link to *
* http://www.webdevelopersjournal.com somwhere on *
* your site. *
* *
* *
* Please send questions and bug reports to: *
* ap*****@hotmail.com *
************************************************** ****/
<br>
<br>
<STYLE TYPE="text/css">
..menu {position: absolute;
font-family: MS Sans Serif;
font-size: 10pt;
background-color: menu;
color: menutext;
border: 2px threedhighlight outset;
cursor: default;
visibility: hidden;
line-height: 140%;}
..visibleMenu {position: absolute;
font-family: MS Sans Serif;
font-size: 10pt;
background-color: menu;
color: menutext;
border: 2px threedhighlight outset;
cursor: default;
visibility: visible;
line-height: 140%;}
..menuItem {color: menutext;
background-color: menu;
padding-left: 10px;
padding-right: 15px;
text-decoration: none;}
..menuItemOver {color: highlighttext;
background-color: highlight;
padding-left: 10px;
padding-right: 15px;
text-decoration: none;}
..menuItemOver A {color: highlighttext;
background-color: highlight;
padding-left: 10px;
padding-right: 15px;
text-decoration: none;
cursor: default;}
..menuItem A {color: menutext;
background-color: menu;
padding-left: 10px;
padding-right: 15px;
text-decoration: none;
cursor: default;}
..more {font-family: WebDings;
text-align: right;
z-index: 100;
position:relative;}
</style>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
var menus = new Array();
var activeItem = null;
var IE4 = ((navigator.appName == "Microsoft Internet Explorer") &&
(parseInt(navigator.appVersion) >= 4 ) &&
!(navigator.appVersion.indexOf("5") > -1 ));
function Menu(){
this.id = "";
this.subMenus = new Array();
this.items = new Array();
this.hasChildren = false;
this.isChild = false;
this.parentMenu = null;
this.parentItem = null;
}
function Item(){
this.id = "";
this.hasMenu = false;
this.menu = null;
this.parentMenu = null;
}
function initMenu(){
// test for IE4+, it won't work otherwise
if(!document.all) return false;
findMenus();
menuContainer.activeMenu = null;
menuContainer.closeAll = closeAll;
attachMenus();
}
function findMenus(){
var cTag = menuContainer.children;
for(var i=0; i < cTag.length; i++){
tcTag = cTag[i];
if(tcTag.className == "menu"){
var tMenu = findSubMenus(tcTag);
menus[menus.length] = tMenu;
}
}
var tHTML = "<div id=\"menuContainer\">";
for(var i=0; i < menus.length; i++){
var tcTag = menus[i]
tHTML += moveHTML(tcTag);
}
tHTML += "</div>";
menuContainer.outerHTML = "";
document.body.innerHTML += tHTML;
for(var i=0; i < menus.length; i++){
var tcTag = menus[i];
setupMenu(tcTag);
}
}
function findSubMenus(menu){
var cMenu = menu.children;
var tMenu = new Menu();
tMenu.id = menu.id;
for(var i=0; i < cMenu.length; i++){
var tcMenu = new Item();
tcMenu.id = cMenu[i].id;
if(tcMenu.id.indexOf("subMenu") != -1){
++i;
var subMenu = cMenu[i];
tMenu.subMenus[tMenu.subMenus.length] =
findSubMenus(subMenu)
tMenu.subMenus[(tMenu.subMenus.length
- 1)].isChild = true;
tMenu.subMenus[(tMenu.subMenus.length
- 1)].parentMenu = tMenu;
tMenu.subMenus[(tMenu.subMenus.length
- 1)].parentItem = tcMenu;
tMenu.hasChildren = true;
tcMenu.hasMenu = true;
tcMenu.menu =
tMenu.subMenus[(tMenu.subMenus.length - 1)];
}
tcMenu.parentMenu = tMenu;
tMenu.items[tMenu.items.length] = tcMenu;
}
return tMenu;
}
function moveHTML(menu){
var tHTML = "";
if(menu.hasChildren == true){
for(var i=0; i < menu.subMenus.length; i++){
tHTML += moveHTML(menu.subMenus[i]);
}
}
var tMenu = eval(menu.id);
var tMenuHTML = tMenu.outerHTML;
tMenu.outerHTML = "";
tHTML += tMenuHTML;
return tHTML;
}
function setupMenu(menu){
if(menu.hasChildren == true){
for(var i=0; i < menu.subMenus.length; i++){
setupMenu(menu.subMenus[i]);
}
}
tMenu = eval(menu.id);
tMenu.noWrap = true;
tMenu.hasChildren = menu.hasChildren;
tMenu.hasVisibleChild = false;
tMenu.visibleChild = null;
tMenu.isChild = menu.isChild;
tMenu.onselectstart = returnFalse;
tMenu.onclick = handleMenuClick;
tMenu.currWidth = 0;
tMenu.items = menu.items;
for(var i=0; i < menu.items.length; i++){
setupItem(menu.items[i]);
}
tMenu.style.pixelWidth += 5;
for(var i=0; i < menu.items.length; i++){
var tItem = eval(menu.items[i].id);
if(!IE4){
tItem.style.width = "100%";
if(tItem.hasMenu == true) {
tItem.more.style.position =
"absolute";
tItem.more.style.pixelLeft =
(tMenu.style.pixelWidth - 17);
}
}
}
if(menu.isChild == true){
tMenu.parentMenu = eval(menu.parentMenu.id);
tMenu.parentItem = eval(menu.parentItem.id);
}
}
function setupItem(item){
tItem = eval(item.id);
tItem.highlight = highlight;
tItem.onmouseover = tItem.highlight;
tItem.parentMenu = eval(item.parentMenu.id);
tItem.hasMenu = false;
tItem.menu = null;
tItem.onclick = handleItemClick;
tItem.ondragstart = returnFalse;
tItem.noWrap = true;
if(item.hasMenu == true){
tItem.innerHTML += "<span id=\"" + item.id +
"_more\" class=\"more\">4</span>";
tItem.more = eval(item.id + "_more");
tItem.menu = eval(item.menu.id);
tItem.hasMenu = true;
}
if(!IE4) {
tItem.parentMenu.style.pixelWidth =
Math.max(tItem.parentMenu.currWidth, tItem.offsetWidth);
}
}
function highlight(){
if(activeItem != null){
if(activeItem != this){
unhighlight(activeItem);
} else {
return;
}
}
event.cancelBubble = true;
this.className = "menuItemOver";
activeItem = this;
// dont open a menu thats already open
if((this.hasMenu == true) &&
(this.parentMenu.hasVisibleChild == true) &&
(this.parentMenu.visibleChild == this.menu)) return;
// if there is a menu open, close it
if(this.parentMenu.hasChildVisible == true){
hideMenu(this.parentMenu.visibleChild);
}
// if this item has a menu, show it
if(this.hasMenu){
showMenu(this.menu);
}
}
function unhighlight(menu){
event.cancelBubble = true;
menu.className = "menuItem";
}
function showMenu(menu, x, y){
event.cancelBubble = true;
if(menu){
if(IE4){
for(var i=0; i < menu.items.length;
i++){
tItem = eval(menu.items[i].id);
if(tItem.hasMenu == true) {
tItem.more.style.pixelLeft = (menu.offsetWidth - tItem.more.offsetLeft
- 17);
}
}
}
if(menu.isChild == true){
menu.style.pixelTop =
menu.parentItem.offsetTop + menu.parentMenu.offsetTop + 4;
menu.style.pixelLeft =
menu.parentMenu.offsetLeft + menu.parentMenu.offsetWidth - 4;
menu.parentMenu.hasChildVisible =
true;
menu.parentMenu.visibleChild = menu;
menu.style.zIndex =
menu.parentMenu.style.zIndex + 1;
} else if(x && y){
menu.style.pixelTop = y;
menu.style.pixelLeft = x;
menuContainer.activeMenu = menu;
document.onclick =
menuContainer.closeAll;
}
} else {
menu = eval(this.menu);
if(IE4){
for(var i=0; i < menu.items.length;
i++){
tItem = eval(menu.items[i].id);
if(tItem.hasMenu == true) {
tItem.more.style.pixelLeft = (menu.offsetWidth - tItem.more.offsetLeft
- 17);
}
}
}
menu.style.pixelTop = event.clientY;
menu.style.pixelLeft = event.clientX;
menuContainer.activeMenu = menu;
document.onclick = menuContainer.closeAll;
}
menu.className = "visibleMenu";
return false;
}
function hideMenu(menu){
// to handle the careless child menu hiding down below
if(menu == null) return false;
event.cancelBubble = true;
// i do this kind of carelessly. i was having trouble
otherwise
hideMenu(menu.visibleChild);
if(menu.isChild == true){
menu.parentMenu.hasChildVisible = false;
menu.parentMenu.visibleChild = null;
} else {
document.onclick = "";
menuContainer.activeMenu = null;
}
menu.className = "menu";
}
function closeAll(){
hideMenu(menuContainer.activeMenu);
}
// simple function to return false
function returnFalse(){return false;}
// function to be used for later functionality
// for now it just keeps the menu open when it receives a click;
function handleMenuClick(){
event.cancelBubble = true;
return false;
}
// just like the function above, only it closes the menu
function handleItemClick(){
event.cancelBubble = true;
menuContainer.closeAll();
}
// searches the document for elements with a menu paramater
function attachMenus(){
for(var i in document.all){
if(document.all[i].menu){
document.all[i].onclick = showMenu;
}
}
}
</script>
</head>
<body onload="initMenu()">
<a href="#" menu="menu1">Brands of Shampoo</a>
<div id="menuContainer">
<div id="menu1" class="menu">
<div id="subMenu1_1" class="menuItem"><a href="/hair/index.html">Hair
Products</a></div>
<div id="menu1_1" class="menu">
<div id="menuItem1_1_1" class="menuItem"><a
href="/hair/shampoo.html">Shampoo</a></div>
<div id="menuItem1_1_2" class="menuItem"><a
href="/hair/gel.html">Gel</a></div>
</div>
<div id="subMenu1_2" class="menuItem"><a href="/skin/index.html">Skin
Care Products</a></div>
<div id="menu1_2" class="menu">
<div id="menuItem1_2_1" class="menuItem"><a
href="/skin/lotion.html">Lotions</a></div>
<div id="subMenu1_2_2" class="menuItem"><a
href="/skin/ointments/index.html">Ointments</a></div>
<div id="menu1_2_2" class="menu">
<div id="menuItem1_2_2_1" class="menuItem"><a
href="/skin/ointments/bengay.html">Ben-Gay</a></div>
<div id="menuItem1_2_2_2" class="menuItem"><a
href="/skin/ointments/icyhot.html">Icy Hot</a></div>
<div id="menuItem1_2_2_3" class="menuItem"><a
href="/skin/ointments/burncream.html">Burn Cream</a></div>
</div>
<div id="menuItem1_2_3" class="menuItem"><a
href="/skin/powder.html">Powder</a></div>
</div>
<div id="menuItem1_3" class="menuItem"><a href="/nailpolish.html">Nail
Polish</a></div>
</div>
</div>
<br>
<a href="#" menu="menu2">Brands of Shampoo</a>
<div id="menu2" class="menu">
<div id="subMenu2_1" class="menuItem"><a href="/hair/index.html">Hair
Products</a></div>
<div id="menu2_1" class="menu">
<div id="menuItem2_1_1" class="menuItem"><a
href="/hair/shampoo.html">Shampoo</a></div>
<div id="menuItem2_1_2" class="menuItem"><a
href="/hair/gel.html">Gel</a></div>
</div>
<div id="subMenu2_2" class="menuItem"><a href="/skin/index.html">Skin
Care Products</a></div>
<div id="menu2_2" class="menu">
<div id="menuItem2_2_1" class="menuItem"><a
href="/skin/lotion.html">Lotions</a></div>
<div id="subMenu2_2_2" class="menuItem"><a
href="/skin/ointments/index.html">Ointments</a></div>
<div id="menu2_2_2" class="menu">
<div id="menuItem2_2_2_1" class="menuItem"><a
href="/skin/ointments/bengay.html">Ben-Gay</a></div>
<div id="menuItem2_2_2_2" class="menuItem"><a
href="/skin/ointments/icyhot.html">Icy Hot</a></div>
<div id="menuItem2_2_2_3" class="menuItem"><a
href="/skin/ointments/burncream.html">Burn Cream</a></div>
</div>
<div id="menuItem2_2_3" class="menuItem"><a
href="/skin/powder.html">Powder</a></div>
</div>
<div id="menuItem2_3" class="menuItem"><a href="/nailpolish.html">Nail
Polish</a></div>
</div>
</div>
</body>
</html>
